<#--
  Matrix Framework Keycloak Login Form Template
  登录表单模板
-->
<#import "template.ftl" as layout>
<@layout.registrationLayout displayInfo=realm.password && realm.registrationAllowed && !usernameEditDisabled??; section>

    <#if section = "header">
        <!-- 登录头部 -->
        <div class="matrix-login-header">
            <h2 class="login-title">欢迎回来</h2>
            <p class="login-subtitle">请使用您的Matrix Framework账号登录</p>
        </div>

    <#elseif section = "form">
        <!-- 登录表单 -->
        <div class="matrix-login-form">
            <form id="kc-form-login" onsubmit="return true;" action="${url.loginAction?string}" method="post">

                <!-- 用户名输入 -->
                <div class="form-group matrix-form-group">
                    <label for="username" class="form-label">
                        <i class="fas fa-user"></i>
                        ${msg("username")}
                    </label>
                    <#if usernameEditDisabled??>
                        <input type="text" id="username" name="username" value="${(login.username!'')?html}"
                               class="form-control" readonly />
                    <#else>
                        <input type="text" id="username" name="username"
                               class="form-control"
                               value="${(login.username!'')?html}"
                               placeholder="请输入用户名或邮箱"
                               autocomplete="username"
                               required
                               pattern=".{3,}"
                               title="用户名至少需要3个字符">
                    </#if>
                </div>

                <!-- 密码输入 -->
                <div class="form-group matrix-form-group">
                    <label for="password" class="form-label">
                        <i class="fas fa-lock"></i>
                        ${msg("password")}
                    </label>
                    <div class="password-input-container">
                        <input type="password" id="password" name="password"
                               class="form-control"
                               placeholder="请输入密码"
                               autocomplete="current-password"
                               required>
                        <button type="button" class="password-toggle" onclick="togglePasswordVisibility('password')">
                            <i class="fas fa-eye" id="password-toggle-icon"></i>
                        </button>
                    </div>
                </div>

                <!-- 记住登录 -->
                <#if realm.rememberMe && usernameEditDisabled??>
                    <div class="form-check matrix-form-check">
                        <input type="checkbox" id="rememberMe" name="rememberMe"
                               class="form-check-input"
                               ${login.rememberMe?string('checked', '')}>
                        <label for="rememberMe" class="form-check-label">
                            ${msg("rememberMe")}
                        </label>
                    </div>
                </#if>

                <!-- 登录按钮 -->
                <div class="form-actions matrix-form-actions">
                    <button type="submit"
                            class="matrix-btn matrix-btn-primary matrix-btn-block"
                            id="kc-login"
                            onclick="showLoading()">
                        <i class="fas fa-sign-in-alt"></i>
                        ${msg("doLogIn")}
                    </button>
                </div>

                <!-- 分割线 -->
                <#if realm.password && social.providers??>
                    <div class="matrix-divider">
                        <span>或使用其他方式登录</span>
                    </div>
                </#if>
            </form>
        </div>

        <!-- 社交登录 -->
        <#if realm.password && social.providers??>
            <div class="matrix-social-login">
                <div class="social-login-grid">
                    <#list social.providers as p>
                        <a href="${p.loginUrl}"
                           class="social-login-btn social-btn-${p.alias?lower_case}"
                           title="使用${p.displayName}登录">
                            <#if p.iconClasses?has_content>
                                <i class="${p.iconClasses}"></i>
                            <#else>
                                <i class="fas fa-sign-in-alt"></i>
                            </#if>
                            <span>${p.displayName}</span>
                        </a>
                    </#list>
                </div>
            </div>
        </#if>

    <#elseif section = "info" >
        <!-- 信息提示区域 -->
        <#if realm.password && realm.registrationAllowed && !usernameEditDisabled??>
            <div class="matrix-login-info">
                <div class="info-content">
                    <i class="fas fa-info-circle"></i>
                    <p>
                        还没有账号？
                        <a href="${url.registrationUrl}">${msg("doRegister")}</a>
                    </p>
                </div>
            </div>
        </#if>

    <#elseif section = "socialProviders" >
        <!-- 社交登录提供者 -->
        <#if social.providers??>
            <div class="matrix-social-providers">
                <ul class="provider-list">
                    <#list social.providers as p>
                        <li class="provider-item">
                            <a href="${p.loginUrl}" class="provider-link">
                                <span class="provider-icon">
                                    <#if p.iconClasses?has_content>
                                        <i class="${p.iconClasses}"></i>
                                    </#if>
                                </span>
                                <span class="provider-name">${p.displayName}</span>
                            </a>
                        </li>
                    </#list>
                </ul>
            </div>
        </#if>
    </#if>
</@layout.registrationLayout>

<!-- 登录表单增强脚本 -->
<script type="module">
    import { LoginFormEnhancer } from '${url.resourcesPath}/js/matrix-login.js';

    // 初始化登录表单增强功能
    document.addEventListener('DOMContentLoaded', function() {
        const loginForm = new LoginFormEnhancer({
            formId: 'kc-form-login',
            showPasswordToggle: true,
            enableValidation: true,
            enableAutoFocus: true,
            enableEnterKeySubmit: true
        });

        loginForm.init();
    });
</script>